<template>
  <el-card>
    <el-input
      v-model="page.input"
      placeholder="请输入内容进行查询"
      :clearable="true"
      style="width: 30%; float: left; margin-bottom: 10px"
    ></el-input>

    <el-button
      type="primary"
      @click="loadCheck()"
      style="width: 5%; float: left; margin-left: 10px"
      ><i class="el-icon-search"></i
    ></el-button>
    <el-table :data="checkedTable" border style="width: 100%">
      <el-table-column prop="checkName" label="检查人" width="180">
      </el-table-column>
      <el-table-column prop="userName" label="借贷人" width="180">
      </el-table-column>
      <el-table-column prop="checkWay" label="检查方式"> </el-table-column>
      <el-table-column prop="checkTime" label="检查时间"> </el-table-column>
      <el-table-column prop="checkImg" label="检查图片">
        <template slot-scope="scope">
          <img :src="scope.row.checkImg" alt="" width="60" height="60" />
        </template>
      </el-table-column>
      <el-table-column prop="checkCause" label="检查结果"> </el-table-column>
      <el-table-column prop="checkClassify" label="贷款归类"> </el-table-column>
      <el-table-column prop="checkClassify" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="handledesc(scope.row.userName)"
            type="text"
            size="small"
            >查看详情</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handlplace(scope.row.checkId)"
            >归档</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handlcollection(scope.row.checkId, scope.row.userName)"
            >催收</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!-- -------------------------详情弹出框--------------------------------- -->
    <el-dialog
      title="提示"
      :visible.sync="dialog.information"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="adddateBonaForm"
        label-width="100px"
        size="medium"
      >
        <el-form-item label="用户名">
          <el-input v-model="userForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="userForm.userPhone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="userForm.userIdCard"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="userForm.userSex"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="userForm.degree"></el-input>
        </el-form-item>
        <el-form-item label="婚姻状况">
          <el-input v-model="userForm.maritaStatus"></el-input>
        </el-form-item>
        <el-form-item label="房屋资产">
          <el-input v-model="userForm.residence"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input v-model="userForm.currentPlaceOfResidence"></el-input>
        </el-form-item>
        <el-form-item label="详细住址">
          <el-input v-model="userForm.detailedAddress"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.information = false">取 消</el-button>
        <el-button type="primary" @click="dialog.information = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- -------------------------------------------------------- -->

    <!-- -------------------------归档弹出框--------------------------------- -->
    <el-dialog
      title="提示"
      :visible.sync="dialog.place"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="checkForm" label-width="100px" size="medium">
        <el-form-item label="检查方式">
          <el-select v-model="checkForm.checkWay" placeholder="请选择方式">
            <el-option label="不定期检查" value="不定期检查"></el-option>
            <el-option label="定期检查" value="定期检查"></el-option>
            <el-option label="跟踪检查" value="跟踪检查"></el-option>
            <el-option label="专项检查" value="专项检查"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查时间">
          <el-col :span="11">
            <el-date-picker
              v-model="checkForm.checkTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="检查结果">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8888/uploadimg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="检查结果">
          <el-input type="textarea" v-model="checkForm.checkCause"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.place = false">取 消</el-button>
        <el-button type="primary" @click="tijiao()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- -------------------------------------------------------- -->

    <!-- ------------------------催收模态框---------------------------- -->
    <el-dialog title="修改" :visible.sync="dialog.collectionShow" width="40%">
      <el-form
        ref="form"
        :model="collectionForm"
        label-width="100px"
        size="medium"
      >
        <el-form-item label="催收方式">
          <el-select
            v-model="collectionForm.collectionWay"
            placeholder="请选择方式"
          >
            <el-option label="电话催收" value="电话催收"></el-option>
            <el-option label="上门催收" value="上门催收"></el-option>
            <el-option label="第三方委托" value="第三方委托"></el-option>
            <el-option label="诉讼" value="诉讼"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收人员" prop="staffId">
          <el-select
            v-model="collectionForm.staffId"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in empList"
              :key="item.empId"
              :label="item.empName"
              :value="item.empId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.checkShow = false">取 消</el-button>
        <el-button type="primary" @click="insertcollection()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
export default {
  data() {
    return {
      imageUrl: "",
      page: {
        currentPage: 1,
        pagesize: 5,
        input: "",
      },
      pageInfo: {
        total: 0,
        pageSizes: [5, 20, 30, 50, 100],
      },
      dialog: {
        information: false,
        place: false,
        collectionShow: false,
      },
      checkedTable: {},
      userForm: {},
      checkForm: {},
      empList: {},
      collectionForm: {},
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code == 200) {
        //将返回的文件储存路径赋值picture字段
        this.checkForm.checkBy1 = res.message;
      }
      console.log(this.checkForm.checkBy1);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    insertcollection() {
      this.dialog.collectionShow = false;

      if (this.collectionForm.collectionWay == "电话催收") {
        this.collectionForm.collectionGrade = "M1";
      } else if (this.collectionForm.collectionWay == "上门催收") {
        this.collectionForm.collectionGrade = "M2";
      } else if (this.collectionForm.collectionWay == "第三方委托") {
        this.collectionForm.collectionGrade = "M3";
      } else {
        this.collectionForm.collectionGrade = "M4";
      }

      this.$axios.post("/Collection", this.collectionForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("归档成功");
        }
      });
    },
    handlcollection(id, name) {
      this.collectionForm.checkId = id;
      this.collectionForm.userName = name;
      this.dialog.collectionShow = true;
      this.$axios.post("/emps/selAll").then((res) => {
        this.empList = res.data.data.empList;
      });
    },
    tijiao() {
      this.$axios.put("/Checked", this.checkForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("归档成功");
        } else {
          this.$message.error("系统错误");
        }
      });
      this.dialog.place = false;
      this.loadCheck();

      this.checkForm = {};
    },
    handlplace(checkId) {
      this.checkForm.checkId = checkId;
      this.dialog.place = true;
    },
    handledesc(userName) {
      this.dialog.information = true;
      this.$axios
        .get("/debitinfos/borrowerUser?userName=" + userName)
        .then((res) => {
          this.userForm = res.data.data.borrowerInfoVoByUserNameLi;
        });
    },
    loadCheck() {
      this.$axios.post("/Checked/page", this.page).then((res) => {
        this.checkedTable = res.data.data.list;
        this.pageInfo.total = res.data.data.pageInfo;
      });
    },
    //当每页显示条数改变时
    handleSizeChange(size) {
      this.page.pagesize = size;
      this.loadCheck();
    },
    //当页数改变时
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.loadCheck();
    },
  },
  mounted() {
    this.loadCheck();
  },
};
</script>